<template>
  <div class="web">
    <div class="webRight">
      <div class="dailyTop">
        <span class="datamet" @click="menberMent()">职能组管理</span
        >&nbsp;&nbsp;>&nbsp;
        <span class="datalog">成员管理</span>
      </div>
      <!-- <station :menuFlag="menuFlag" v-if="dataList.length!=0"/> -->
      <el-button
        class="addstation"
        type="primary"
        @click="addStation()"
        plain="plain"
        >添加组员</el-button
      >
      <!-- 职能组成员管理 -->
      <div class="taskList" v-if="dataList.length != 0">
        <div class="fulfill">
          <el-table
            border
            :data="dataList.is"
            tooltip-effect="dark"
            :header-cell-style="{ background: '#F9F9F9' }"
            style="width: 100%"
          >
            <el-table-column
              prop="name"
              align="center"
              label="姓名"
            ></el-table-column>
            <el-table-column prop="title" align="center" label="职能组">
              <template slot-scope="scope">{{
                dataList.functionName
              }}</template>
            </el-table-column>
            <el-table-column prop="isLeader" align="center" label="组长">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.isLeader"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#1ABC9C"
                  inactive-color="#CCCCCC"
                  @change="changeLeader(scope.row)"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="操作"
              v-if="this.znzId == '31'"
            >
              <template slot-scope="scope">
                <el-button
                  type="success"
                  plain
                  size="mini"
                  @click="addGroups(scope.row)"
                  >职能组管理</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="taskList" v-if="dataList.length == 0">
        <p>--暂无数据--</p>
      </div>
      <!-- 添加成员 -->
      <el-dialog
        title="添加成员"
        :close-on-click-modal="false"
        :show-close="false"
        :visible.sync="dialogMance"
        width="500px"
        center
      >
        <el-tree
          :data="dataList.not"
          show-checkbox
          node-key="id"
          :default-checked-keys="checkTree"
          :props="defaultProps"
          ref="tree"
        ></el-tree>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogMance = false">取 消</el-button>
          <el-button type="primary" @click="beture" :loading="loading"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!-- 职能组弹框 -->
      <el-dialog
        :title="titleStation"
        :close-on-click-modal="false"
        :show-close="false"
        :visible.sync="dialogStation"
        width="500px"
        center
      >
        <el-form
          status-icon
          label-width="120px"
          :model="form"
          :rules="rules"
          ref="form"
          class="demo-ruleForm"
        >
          <el-form-item label="职能组" prop="deptId">
            <el-tree
              :data="postData"
              :props="defaultPropss"
              show-checkbox
              @check="checkChange"
              ref="tree"
              node-key="value"
            />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close('form')">取 消</el-button>
          <el-button type="primary" @click="save('form')">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  selectGroupUser,
  insertGroupUser,
  setGroupLeader,
  selectFunGroupList,
  updateBossGroup,
} from "@/service/Api.js"; // 接口

export default {
  name: "member",
  props: ["znzId"],
  data() {
    return {
      dialogStation: false,
      popoverVisible: false,
      titleStation: "",
      dialogMance: false,
      checkTree: [],
      defaultProps: {
        label: "name",
      },
      form: {
        deptId: "",
      },
      rules: {},
      loading: false,
      menuFlag: "0",
      fid: "",
      id: "",
      //传过来的参数
      fid: this.znzId,
      dataList: [],
      toloading: false,
      pn: 1,
      ps: 10,
      defaultPropss: {
        children: "children",
        label: "name",
      },
      postData: [], //部门选择
      typeValue: [],
    };
  },
  created() {
    this.dailyList();
    this.selectFGList();
  },
  methods: {
    //设置组长
    changeLeader(row) {
      // console.log(row);
      this.$confirm(`是否确认该操作设置`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then((res) => {
          let data = {
            uid: row.id,
            islea: row.isLeader,
          };
          setGroupLeader(data).then((res) => {
            if (res.code == 0) {
              this.$message.success("设置成功");
              this.dailyList();
              console.log(JSON.parse(sessionStorage.getItem("userInfo")).name);
              if (
                JSON.parse(sessionStorage.getItem("userInfo")).name == row.name
              ) {
                // sessionStorage.setItem('nowleader',row.isLeader)
                // console.log(sessionStorage.getItem('nowleader'))
                console.log(JSON.parse(sessionStorage.getItem("userInfo")));
                let obj = JSON.parse(sessionStorage.getItem("userInfo"));
                obj.isLeader = row.isLeader;
                sessionStorage.setItem("userInfo", JSON.stringify(obj));
                console.log(obj.isLeader);
                console.log(
                  JSON.parse(sessionStorage.getItem("userInfo")).isLeader
                );
              }
            } else {
            }
          });
        })
        .catch(() => {
          this.dailyList();
        });
    },
    handleMenu(id) {
      this.menuFlag = id;
    },
    //返回职能组
    menberMent() {
      sessionStorage.setItem("menuFlag", "16");
      // this.$router.push({ path: "/companyMent" });
      this.$emit("toBack", { falg: 16 });
    },
    //职能组成员列表
    dailyList() {
      this.toloading = true;
      selectGroupUser(this.fid).then((res) => {
        this.toloading = false;
        if (res.code == 0) {
          this.dataList = res.data;
        } else {
          this.dataList = [];
        }
      });
    },

    // 递归替换属性名
    TreeDataSource(arr) {
      return arr.map((v, i) => {
        return {
          ...v,
          value: v.id,
          label: v.name,
          children: v.children ? this.TreeDataSource(v.children) : "",
        };
      });
    },

    selectFGList() {
      selectFunGroupList().then((res) => {
        if (res.code === 0) {
          this.postData = this.TreeDataSource(res.data);
        }
      });
    },

    // 职能组--添加/修改
    addGroups(row) {
      this.flag = 1;
      this.titleStation = "修改职能组";
      this.id = row.id;
      if (row.fids) {
        this.typeValue = [];
        let typeValue2 = row.fids.split(",");
        let typeValue3 = [];
        this.postData.map((item) => {
          typeValue2.map((items) => {
            if (item.id == items) {
              typeValue3.push({ label: item.label, value: item.id });
              this.typeValue = JSON.parse(JSON.stringify(typeValue3));
            }
          });
        });
        this.$nextTick(() => {
          this.$refs.tree.setCheckedNodes(this.typeValue);
        });
      } else {
        this.typeValue = row.fid.toString().split(",");
      }
      this.dialogStation = true;
    },

    optionData(array, result = []) {
      array.forEach((item) => {
        result.push({ label: item.label, value: item.id });
        if (item.children && item.children.length !== 0) {
          this.optionData(item.children, result);
        }
      });
      return JSON.parse(JSON.stringify(result));
    },

    // tree选择值修改时
    checkChange() {
      this.typeValue = [];
      // 将tree选择的id赋值给select
      this.$refs["tree"].getCheckedNodes().forEach((value) => {
        // 父级在select中不展示
        this.typeValue.push(value.id);
      });
    },
    //关闭弹框
    close(formName) {
      // this.selectedOptions = [];
      this.typeValue = [];
      this.$refs[formName].resetFields();
      this.dialogStation = false;
      this.$refs["tree"].setCheckedKeys([]);
    },
    save(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let opt = this.typeValue.join(",");
          let data = {
            id: this.id,
            fids: opt,
          };
          updateBossGroup(data).then((res) => {
            if (res.code == 0) {
              this.dailyList();
              this.$message.success("操作成功!");
              this.close("form");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    //添加成员
    addStation() {
      this.dialogMance = true;
    },
    beture() {
      let keyList = this.$refs.tree.getCheckedKeys(true);
      if (keyList.length == 0) {
        this.$message.warning("您还未选择您要添加的成员");
        return;
      }
      insertGroupUser(this.fid, keyList).then((res) => {
        if (res.code == 0) {
          this.$message.success("操作成功~");
          this.dailyList();
          this.dialogMance = false;
        }
      });
    },
  },
};
</script>

<style scoped>
.webRight {
  width: 100%;
}
.fulfill {
  margin-top: 20px;
}
.addstation {
  margin-top: 20px;
}
.webLeft {
  margin-top: 20px;
}
.memberTitle {
  font-size: 16px;
  color: #ccc;
}
.search {
  display: flex;
}
.search .el-button:first-child {
  margin-right: 20px !important;
}
#menu {
  position: fixed;
}
.datalog {
  font-weight: bolder;
}
.datamet {
  cursor: pointer;
}
.titconet {
  width: 74%;
  text-align: center;
  font-size: 15px;
}
.titconet span:nth-child(1) {
  font-weight: bold;
  font-size: 23px;
}
.datalog {
  font-weight: bolder;
}
.datamet {
  cursor: pointer;
}
.datamet:hover {
  color: red;
}
#dailyMent {
  height: 100%;
}
.dailyTop {
  display: flex;
  padding: 20px 20px 0 0px;
}
.taskList p {
  color: #999;
  font-size: 16px;
  text-align: center;
}
.taskTile {
  display: flex;
  align-items: center;
  margin: 10px 20px 0 20px;
  padding: 30px 10px;
  border: 1px solid #e8eef5;
  background: #f9f9f9;
}
.taskTile i {
  font-size: 22px;
  color: #34b79a;
}
.taskTile h3,
.taskTile span {
  margin-right: 20px !important;
}
.tody {
  width: 15%;
}
.fulfill {
  width: 100%;
}
.tomorrow {
  width: 30%;
}
.web {
  margin-top: 0;
}
.web h3 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  border-top: 1px solid #e8eef5;
  border-left: 1px solid #e8eef5;
  padding: 10px 5px;
  background: #f9f9f9;
}
.web .tomorrow h3 {
  border-right: 1px solid #e8eef5;
}
.web h3 span:first-child {
  width: 100%;
  display: flex;
  justify-content: center;
  flex: 1;
}
.web h3 span:last-child {
  color: #999;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}
.web h3 span:last-child:hover {
  color: red;
}

/* 把select的下拉框隐藏 */

.el-select {
  .el-select-dropdown.hiddenSel {
    display: none;
  }
}
</style>
